<template>
    <div class="login">

        <el-card class="box-card">
            <div class="headers">
                后台管理系统
            </div>
            <el-form label-width="80px" ref="form" size="small" width="50%" :rules="rules" class="loginForm"
                :model="form">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" width="80px"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
// import { nameRule, passRule } from '../utils/vaildate.js'
// import { setToken } from '@/utils/setToken.js'
import { nameValid, passValid } from '@/util/Validate.js'
import { setToken, getToken } from '@/util/SetTime.js'
import { login } from '@/api/api.js'
// import service from '../service'

export default {
    data() {

        return {
            form: {
                username: "",
                password: "",
            },
            rules: {

                username: [
                    { validator: nameValid, trigger: 'blur' }
                ],
                password: [
                    { validator: passValid, trigger: 'blur' }
                ]
            }
        }


    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    setToken("a", "b")
                    login(this.form).then(async (res) => {
                        console.log('res', res.name)
                        setToken('userName', res.name);
                        await setToken('token', res.name);
                        console.log('存储后的 token:', getToken('token')); // 确认存储成功
                    })



                    this.$router.push("/home")
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }


}







</script>
<style lang="less" scoped>
.login {
    width: 100%;
    height: 1000px;


    .box-card {
        width: 550px;
    }

    display: flex;
    justify-content: center;

    align-items: center;


    background-color: aqua;


    .headers {
        position: relative;
        margin-left: 200px;
    }

    .el-button {
        width: 400px;
    }



}
</style>